package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.plotly._
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.ReactElement
import slinky.web.html._

import scala.scalajs.js
import myJs.Implicits._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object BarCp {

  case class Props(kindV: String)

  val component = FunctionalComponent[Props] { props =>

    useEffect(() => {
      FTool.refreshSvg
    }, List(props.kindV)
    )

    object FTool {

      def refreshSvg = {
        Api.browseGene.barData(s"${props.kindV}").map { rs =>
          val kinds = rs.map(_.myGet("celltype")).toList
          val vs = rs.map(_.myGet("Freq")).toList
          val texts = kinds.zip(vs).map { case (kind, v) =>
            s"celltype:${kind}<br>Freq:${v}"
          }
          val plotDatas = List(
            Bar(
              x = kinds,
              y = vs,
              hoverinfo = HoverInfo.text,
              hovertext = texts
            )
          )
          val config = Config(displayModeBar = false)
          val layout = Layout(
            xaxis = Axis(tickangle = -45),
            margin = Margin(b = 160, t = 10, l = 50, r = 0),
            yaxis = Axis(title = "Percentage of cells"),
            hovermode = HoverMode.closest
          )
          Plotly.newPlot(s"barSvg", plotDatas, layout = layout, config = config)
        }
      }

    }

    div(
      h5(style := Style(marginBottom = 15, fontSize = 16, marginTop = 15), id := "sBar",
        "Bar Plot ",
        {
          val popover: ReactElement = Popover(id = "popover-basic")(
            Popover.Title("Note"),
            Popover.Content(
              "Bar plot showing the percentage of cells in each cell type"
            )
          )
          OverlayTrigger(
            placement = "right",
            trigger = js.Array("focus", "hover"),
            overlay = popover
          )(
            span(
              a(`type` := "button",
                i(className := "fas fa-info-circle")
              )
            )
          )
        }
      ),
      div(className := "mySvg", id := "barSvg")
    )


  }

  object STool {

  }

}
